<template name="moreSelect">
	<view class="city-box">
		<view class="city-box-title" :style="'background:' + colorValue">
			<view class="close-btn" @tap="closeCity">关闭</view>
			<text>{{ title }}(最多{{ maxCount }}个)</text>
			<view class="query-btn" @tap="queryCity">确定</view>
		</view>
		<view class="choosed-box" v-if="chooseCityList.length > 0">
			<view class="city-single" v-for="(item, index) in chooseCityList" :key="index">
				<text :style="'color:' + colorValue">{{ item.name }}</text>
				<image @tap="delCity(index)" src="@/static/icon/close-icon.png" mode=""></image>
			</view>
		</view>
		<view class="city-data" v-if="level == 1">
			<view class="level-one-data">
				<scroll-view scroll-y="true" :style="'height:' + (900 - viewHeight) + 'rpx'" @scroll="scroll" :scroll-top="scrollTop" scroll-with-animation="true">
					<view class="county-single" v-for="(zItem, zIndex) in cityData" :key="zIndex" @tap="chooseOneCity(zItem)">
						<view v-if="cityIdArr.includes(zItem.id)" class="city-name" :style="'color:' + colorValue">
							{{ zItem.name }}
						</view>
						<view v-else class="city-name">{{ zItem.name }}</view>

						<view v-if="cityIdArr.includes(zItem.id)" class="selected-box" :style="'background:' + colorValue + ';border:1px solid ' + colorValue">
							<image src="@/static/icon/nike.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="city-data" v-else-if="level == 2">
			<view class="province-data">
				<scroll-view scroll-y="true" :style="'height:' + (900 - viewHeight) + 'rpx'" scroll-with-animation="true">
					<view @tap="switchCity(cIndex)" class="province-single" :class="cityIndex == cIndex ? 'city-active' : ''" v-for="(cItem, cIndex) in cityData" :key="cIndex">
						<text>{{ cItem.name }}</text>
					</view>
				</scroll-view>
			</view>
			<view class="county-data">
				<scroll-view scroll-y="true" :style="'height:' + (900 - viewHeight) + 'rpx'" @scroll="scroll" :scroll-top="scrollTop" scroll-with-animation="true">
					<view class="county-single" v-for="(zItem, zIndex) in cityData[cityIndex].children" :key="zIndex" @tap="chooseCity(zItem)">
						<view v-if="cityIdArr.includes(zItem.id)" class="city-name" :style="'color:' + colorValue">
							{{ zItem.name }}
						</view>
						<view v-else class="city-name">{{ zItem.name }}</view>
						<view v-if="cityIdArr.includes(zItem.id)" class="selected-box" :style="'background:' + colorValue + ';border:1px solid ' + colorValue">
							<image src="@/static/icon/nike.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="city-data" v-else-if="level == 3">
			<view class="province-data" style="width: 250rpx">
				<scroll-view scroll-y="true" :style="'height:' + (900 - viewHeight) + 'rpx'" scroll-with-animation="true">
					<view @tap="switchOne(cIndex)" class="province-single" :class="oneIndex == cIndex ? 'city-active' : ''" v-for="(cItem, cIndex) in cityData" :key="cIndex">
						<text class="one-text">{{ cItem.name }}</text>
					</view>
				</scroll-view>
			</view>
			<view class="two-data">
				<scroll-view scroll-y="true" :style="'height:' + (900 - viewHeight) + 'rpx'" @scroll="scroll" :scroll-top="scrollTop" scroll-with-animation="true">
					<view
						class="two-single"
						:class="twoIndex == zIndex ? 'city-active' : ''"
						v-for="(zItem, zIndex) in cityData[oneIndex].children"
						:key="zIndex"
						@tap="chooseTwo(zIndex)"
					>
						<view class="city-name">{{ zItem.name }}</view>
					</view>
				</scroll-view>
			</view>
			<view class="three-data">
				<scroll-view scroll-y="true" :style="'height:' + (900 - viewHeight) + 'rpx'" @scroll="scroll" :scroll-top="scrollTop" scroll-with-animation="true">
					<view class="county-single" v-for="(zItem, zIndex) in cityData[oneIndex].children[twoIndex].children" :key="zIndex" @tap="chooseThree(zItem)">
						<view v-if="cityIdArr.includes(zItem.id)" class="city-name" :style="'color:' + colorValue + ';font-weight:bold'">{{ zItem.name }}</view>
						<view v-else class="city-name">{{ zItem.name }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'more-select',
	data() {
		return {
			viewHeight: 0,
			oneIndex: 0,
			twoIndex: 0
		};
	},
	props: {
		maxCount: {
			type: Number,
			default: 3
		},
		title: {
			type: String,
			default: '选择城市'
		},
		level: {
			type: Number,
			default: 2
		},
		chooseCityList: {
			type: Array,
			default: () => []
		},
		cityData: {
			type: Array,
			default: () => []
		},
		cityIdArr: {
			type: Array,
			default: () => []
		},
		scrollTop: {
			type: Number,
			default: 0
		},
		cityIndex: {
			type: Number,
			default: 0
		},
		colorValue: {
			type: String,
			default: '#016CE1'
		},
		oldScrollTop: {
			type: Number,
			default: 0
		}
	},
	mounted() {
		// this.getDescBox()
		// console.log(this.cityData)
	},
	methods: {
		scroll(e) {
			this.$emit('scrollCity', e.detail.scrollTop);
		},
		closeCity() {
			this.$emit('closeCity', true);
		},
		queryCity() {
			this.$emit('queryCity', true);
		},
		switchCity(index) {
			this.$emit('switchCity', index);
		},
		switchOne(index) {
			this.oneIndex = index;
		},
		chooseTwo(index) {
			this.twoIndex = index;
		},
		getViewHeight() {
			uni.createSelectorQuery()
				.in(this)
				.select('.choosed-box')
				.boundingClientRect((result) => {
					if (result) {
						this.viewHeight = result.height * 2;
					} else {
						this.viewHeight = 0;
					}
				})
				.exec();
		},
		chooseCity(item) {
			let parms = {
				id: item.id,
				pid: item.pid,
				name: item.name,
				parentName: this.cityData[this.cityIndex].name
			};
			this.$emit('chooseCity', parms);
		},
		chooseOneCity(item) {
			console.log(item);
			let parms = {
				id: item.id,
				name: item.name
			};
			this.$emit('chooseCity', parms);
		},
		chooseThree(item) {
			let parms = {
				id: item.id,
				oneId: this.cityData[this.oneIndex].id,
				twoId: item.pid,
				name: item.name,
				oneName: this.cityData[this.oneIndex].name,
				twoName: this.cityData[this.oneIndex].children[this.twoIndex].name
			};
			console.log(parms);
			this.$emit('chooseCity', parms);
		},
		delCity(index) {
			this.$emit('delCity', index);
		}
	}
};
</script>

<style lang="scss">
.city-box {
	width: 750rpx;
	height: 1000rpx;
	background: rgba($color: #eeeeee, $alpha: 1);

	.city-box-title {
		width: 750rpx;
		height: 100rpx;
		background: #016ce1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #ffffff;

		.close-btn {
			margin-left: 36rpx;
			font-size: 28rpx;
		}

		.query-btn {
			margin-right: 36rpx;
			font-size: 28rpx;
		}

		text {
			font-size: 32rpx;
		}
	}

	.level-one-data {
		width: 700rpx;
		margin: 0 auto;

		// background: red;
		.county-single {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			border-bottom: 1px solid rgba($color: #999999, $alpha: 0.15);

			.city-name {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #232425;
			}

			image {
				width: 42rpx;
				height: 42rpx;
			}

			.no-select-box {
				width: 42rpx;
				height: 42rpx;
				border: 1px solid red;
				border-radius: 7rpx;
			}
		}
	}

	.city-data {
		display: flex;
		border-top: 1px solid rgba($color: #eeeeee, $alpha: 0.15);

		.county-single {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			border-bottom: 1px solid rgba($color: #999999, $alpha: 0.15);

			.city-name {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #232425;
			}

			image {
				width: 42rpx;
				height: 42rpx;
			}
		}

		.county-data {
			width: 450rpx;
		}

		.province-scroll {
			height: 795rpx;
		}

		.province-scroll-short {
			height: 900rpx;
		}

		.two-data {
			width: 280rpx;
			background-color: #ffffff;

			.two-single {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 90rpx;
				padding-left: 20rpx;
				.city-name {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #232425;
				}

				image {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

		.province-data {
			width: 300rpx;
			background: #ffffff;

			.province-single {
				width: 300rpx;
				display: flex;
				height: 90rpx;
				align-items: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #232425;

				text {
					margin-left: 30rpx;
				}
			}
		}
	}

	.city-active {
		background: #eeeeee;
		color: #016ce1;
		font-weight: bold;
	}

	.choosed-box {
		width: 750rpx;
		background: #ffffff;
		padding: 30rpx 0 0 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.city-single {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
			margin-bottom: 30rpx;
			padding: 0 20rpx;
			// width: 125rpx;
			height: 46rpx;
			background: rgba($color: #016ce1, $alpha: 0.16);
			border-radius: 26rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #016ce1;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 6rpx;
			}
		}
	}
}

.one-text {
	width: 220rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.selected-box {
	width: 38rpx;
	height: 38rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	image {
		width: 38rpx;
		height: 38rpx;
	}
	border-radius: 7rpx;
}
</style>
